✨ Optimize ChatItem and StreamItem components and reduce rerender - #4
Conversation
… performance improvements
|
Caution Review failedThe pull request is closed. WalkthroughChatItem and StreamItem components are now wrapped with React.memo and use case-insensitive prop comparators; ChatItem no longer uses useMemo for iframeSrc. GridItem adds Changes
Sequence Diagram(s)sequenceDiagram
actor User
participant Parent as GridItem
participant Stream as StreamItem (memo)
participant Chat as ChatItem (memo)
participant IFrame as <iframe>
User->>Parent: change props (streamName / theme)
Parent->>Stream: render(streamName)
Parent->>Chat: render(streamName, isDarkThemePreferred)
note over Stream,Chat: Memoized — re-render only if comparator detects change
Parent->>IFrame: set src=iframeSrc, key=iframeSrc
alt iframeSrc changed
IFrame-->>IFrame: Unmount → Mount (fresh load)
else iframeSrc unchanged
IFrame-->>IFrame: No remount
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Poem
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (2)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
src/components/gridItems/StreamItem/StreamItem.tsx (1)
14-15: SSR safety and URL hardening.
- Guard
windowfor SSR to avoid ReferenceError.- URL‑encode
streamNameto prevent malformed URLs/injection.Apply:
- const iframeSrc = `https://player.twitch.tv/?channel=${streamName}&parent=${window.location.hostname}`; + const parent = typeof window !== 'undefined' ? window.location.hostname : ''; + const channel = encodeURIComponent(streamName); + const iframeSrc = `https://player.twitch.tv/?channel=${channel}&parent=${parent}`;Optional (reduce remounts due to casing only):
-const StreamItem = memo(({ streamName }: StreamItemProps) => { +const StreamItem = memo(({ streamName }: StreamItemProps) => { // ... -}); +}, (prev, next) => prev.streamName.toLowerCase() === next.streamName.toLowerCase());Confirm whether the app ever renders on the server. If yes, the guard is required to prevent hydration/runtime errors.
src/components/gridItems/ChatItem/ChatItem.tsx (1)
12-12: Make Twitch chat embed SSR-safe, URL-encode channel, and document dark-mode param
- Guard access to window and use encodeURIComponent(streamName); keep dark mode flag but note darkpopout is undocumented (still works); prefer documented theme=dark on the Everything embed when feasible.
Apply:
- const iframeSrc = `https://www.twitch.tv/embed/${streamName}/chat?parent=${window.location.hostname}${isDarkThemePreferred ? '&darkpopout' : ''}`; + const parent = typeof window !== 'undefined' ? window.location.hostname : ''; + const channel = encodeURIComponent(streamName); + const themeParam = isDarkThemePreferred ? '&darkpopout' : ''; + const iframeSrc = `https://www.twitch.tv/embed/${channel}/chat?parent=${parent}${themeParam}`;Optional memo comparator to avoid rerenders on casing-only changes:
-const ChatItem = memo(({ streamName, isDarkThemePreferred = false }: ChatItemProps) => { +const ChatItem = memo(({ streamName, isDarkThemePreferred = false }: ChatItemProps) => { // ... -}); +}, (prev, next) => + prev.isDarkThemePreferred === next.isDarkThemePreferred && + prev.streamName.toLowerCase() === next.streamName.toLowerCase() +);
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
src/components/gridItems/ChatItem/ChatItem.tsx(2 hunks)src/components/gridItems/GridItem/GridItem.tsx(1 hunks)src/components/gridItems/StreamItem/StreamItem.tsx(2 hunks)
🔇 Additional comments (3)
src/components/gridItems/GridItem/GridItem.tsx (1)
35-35: Keying iframe to src: LGTM; confirm intended UX on every src change.Forces a full remount (resets scroll/focus/state) whenever
iframeSrcchanges, which is likely desired for hard refreshes. Just confirm this is acceptable for theme/param-only changes too.src/components/gridItems/StreamItem/StreamItem.tsx (1)
9-25: Memoization: LGTM.Wrapping with
memois appropriate; props are stable and this should reduce needless rerenders.src/components/gridItems/ChatItem/ChatItem.tsx (1)
10-19: Memoization: LGTM.Consistent with StreamItem; good for avoiding needless rerenders.
|
1 participant
… performance improvements
Summary by CodeRabbit
Bug Fixes
Refactor